<template>
  <div class="file1-table">
    <el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
      align="center"
      prop="num"
      label="序号"
      width="120">
    </el-table-column>
    <el-table-column
      align="center"
      prop="name"
      label="名称"
    >
    </el-table-column>
    <el-table-column
      align="center"
      prop="anchor"
      label="主播"
    >
    </el-table-column>
    <el-table-column
      align="center"
      prop="date"
      label="制作时间"
    >
    </el-table-column>
    <el-table-column align="center">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="danger"
          icon="el-icon-delete"
          v-if="isBtnShow('delete')"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          <el-button
          size="mini"
          icon="el-icon-download"
          v-if="isBtnShow('download')"
          @click="handleEdit(scope.$index, scope.row)">下载</el-button>
      </template>
    </el-table-column>
   </el-table>
   <el-dialog
    title="提示"
    :visible.sync="centerDialogVisible"
    width="30%"
    center>
    <span>确定删除<span style="color:#f30000">{{centerDialogContent}}</span>的合成配音</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="centerDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="confirmDelete">确 定</el-button>
    </span>
  </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    btnShow: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      tableData: [{
        num: '1',
        name: '都江堰景区介绍',
        anchor: '萌小新',
        date: '2018-3-21 18:00:00'
      }, {
        num: '2',
        name: '都江堰景区介绍',
        anchor: '萌小新',
        date: '2018-3-21 18:00:00'
      }, {
        num: '3',
        name: '都江堰景区介绍',
        anchor: '萌小新',
        date: '2018-3-21 18:00:00'
      }, {
        num: '4',
        name: '都江堰景区介绍',
        anchor: '萌小新',
        date: '2018-3-21 18:00:00'
      }],
      centerDialogVisible: false,
      centerDialogContent: '',
      operateIndex: -1 // 正在操作的数据
    }
  },
  methods: {
    handleEdit (index, row) {
      console.log(index, row)
    },
    handleDelete (index, row) {
      console.log(index, row)
      this.centerDialogVisible = true
      this.centerDialogContent = row.name
      this.operateIndex = index
    },
    confirmDelete () {
      this.centerDialogVisible = false
      this.tableData.splice(this.operateIndex, 1)
    },
    isBtnShow (value) {
      // console.log(this.btnShow)
      return this.btnShow.indexOf(value) > -1
    }
  }
}
</script>

<style lang="less">
  @import '../../../../assets/less/file1';
</style>
